<template>
    <el-row :gutter="20" class="statistics">
        <el-col :span="6" v-for="stat in alarmStats" :key="stat.title">
            <el-card>
                <div class="stat-card">
                    <div class="stat-info">
                        <div class="stat-title">{{ stat.title }}</div>
                        <div class="stat-value" :class="stat.colorClass">
                            {{ stat.value }}
                            <span class="stat-unit">{{ stat.unit }}</span>
                        </div>
                    </div>
                    <i :class="['fa', stat.icon, stat.colorClass]" style="font-size: 32px;"></i>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>
import { computed } from 'vue';

let props = defineProps({
    alarms: {
        type: Array,
        default: () => [],
    }
})

const alarmStats = computed(() => {
    let alarms = props.alarms;

    let total = alarms.length;
    let resolved = alarms.filter(alarm => alarm.status === 2).length;
    let unresolved = alarms.filter(alarm => alarm.status === 1).length;

    return [
        {
            title: '总告警数',
            value: total,
            unit: '条',
            icon: 'fa-warning',
            colorClass: 'text-danger',
        },
        {
            title: '待处理',
            value: unresolved,
            unit: '条',
            icon: 'fa-clock-o',
            colorClass: 'text-warning',
        },
        {
            title: '已处理',
            value: resolved,
            unit: '条',
            icon: 'fa-check-circle',
            colorClass: 'text-primary',
        }, {
            title: '解决率',
            value: total === 0 ? 0 : (resolved / total * 100).toFixed(2),
            unit: '%',
            icon: 'fa-percent',
            colorClass: 'text-success',
        }
    ]
}) 
</script>

<style scoped>
.statistics {
    margin-bottom: 20px;
}



.stat-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-info .stat-title {
    font-size: 14px;
    color: var(--el-text-color-secondary);
}

.stat-info .stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-top: 8px;
}

.stat-unit {
    font-size: 14px;
    margin-left: 4px;
    color: var(--el-text-color-secondary);
}


/* 主题色定义 */
.text-primary {
    color: var(--el-color-primary);
}

.text-success {
    color: var(--el-color-success);
}

.text-warning {
    color: var(--el-color-warning);
}

.text-danger {
    color: var(--el-color-danger);
}

.text-info {
    color: var(--el-color-info);
}
</style>